<template>
  <div id="example1" class="demo">
    <p>模板语法 使用双大括号的文本插值: {{rawHtml}}</p>
    <p> v-html command <span v-html="rawHtml"></span></p>
    v-model测试:v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，
    根据表单上的值，自动更新绑定的元素的值
    <label for="r1">ChangeColor</label><input type="checkbox" v-model="use" id="r1">
    <br>
    <div v-bind:class="{'class1': use}">
      v-bind测试:class指令 {{ user }}
    </div>
    <ol>
      v-for迭代数组：需要使用v-bind搭配，才能循环出来值
    <li v-for="site in sites" v-bind:key="site.text">
      {{ site.text }}
    </li>
  </ol>
  <p v-if="seen">v-if的true/false验证：现在你看到我了</p>
  按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应
  <button v-on:click="reverseMessage">反转字符串</button>
  {{ on_message }}
  </div>
  目前v-if试用元素有p和template div
  <template v-if="seen" >
    <h1>网站</h1>
        <p>Google</p>
        <p>Runoob</p>
        <p>Taobao</p>
  </template>
  <h1>测试v-else-if逻辑</h1>
  <div id="app">
    <div v-if="type === 'A'">
         A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
    <ul>
      <h1>v-for迭代对象</h1>
      <li v-for="(value,key,index) in object" v-bind:key="value">
    {{ index }}. {{key}}: {{value}}
    </li>
    </ul>
    <select v-on:change="changeVal($event)" v-model="selOption">
      <template v-for="(site,index) in sites2" v-bind:key="site.id">
        <option v-if = "index == 1" v-bind:value="site.name" selected>{{site.name}}</option>
        <option v-else v-bind:value="site.name"> {{site.name}}</option>
      </template>
    </select>
</div>
</template>

<script>
 const ModuleExample = {
  data () {
    return {
      rawHtml: '<span style="color: red">这里会显示红色！</span>',
      use: false,
      sites: [
        { text: 'Google' },
        { text: 'Runoob' },
        { text: 'Taobao' }
      ],
      seen: true,
      on_message: "DXS",
      type: "C",
      object: {
        name: '菜鸟教程',
        url: 'http://www.runoob.com',
        slogan: '学的不仅是技术，更是梦想！'
      },
      selOption: "Runoob",
      sites2: [
            {id:1,name:"Google"},
            {id:2,name:"Runoob"},
            {id:3,name:"Taobao"},
      ]
    }
  },
  methods: {
    reverseMessage() {
      this.on_message = this.on_message.split('').reverse().join('')
    },
    changeVal: function(event) {
      this.selOption = event.target.value;
      alert("你选中了" + this.selOption);
    }
  }
 }

 export default ModuleExample

</script>
